<!DOCTYPE html>
<html lang="zh" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<title>选图界面</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link href="css/mui.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/mui.picker.css">
	<link rel="stylesheet" href="css/mui.poppicker.css">
	<link rel="stylesheet" href="css/avgrund.css">
	<script src="js/vue.min.js"></script>
</head>
<body>
	<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/mui.poppicker.js"></script>
<script src="js/avgrund.js"></script>
<script type="text/javascript" charset="utf-8">
	mui.init();
</script>

<div id="app">
	<aside id="point-popup" class="avgrund-popup" style="width: 90%;margin-left: 5%; margin-top: 30%;">
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label>选择点:</label>
				<input type="text" class="mui-input-clear" placeholder="请选择点" v-model="editPoint.flag" @click="onSelectNode" readonly >
			</div>
			<div class="mui-input-row" v-show="editPoint.data.nodeType == 1 || editPoint.data.nodeType == 2 || editPoint.data.nodeType == 10">
				<label>夜战</label>
				<div id="sw-night" class="mui-switch">
					<div class="mui-switch-handle"></div>
				</div>
			</div>
			<div class="mui-input-row" v-show="editPoint.data.roundabout == 1">
				<label>迂回</label>
				<div id="sw-round-about" class="mui-switch">
					<div class="mui-switch-handle"></div>
				</div>
			</div>
			<div class="mui-input-row" v-show="editPoint.data.nodeType == 1 || editPoint.data.nodeType == 2 || editPoint.data.nodeType == 10 || editPoint.data.nodeType == 11">
				<label style="font-size: 14px;">索敌失败SL</label>
				<div id="sw-round-fail" class="mui-switch">
					<div class="mui-switch-handle"></div>
				</div>
			</div>
			<div class="mui-input-row" v-show="editPoint.data.nodeType == 3 || editPoint.data.nodeType == 5">
				<label>资源点SL</label>
				<div id="sw-sl" class="mui-switch">
					<div class="mui-switch-handle"></div>
				</div>
			</div>
			<div class="mui-input-row" v-show="editPoint.data.buff.length != 0">
				<label>战况</label>
				<input type="text" class="mui-input-numbox" v-model="editPoint.buffDec" @click="onBuffSelect" readonly>
			</div>
			<div class="mui-input-row mui-input-range" v-show="editPoint.data.nodeType == 1 || editPoint.data.nodeType == 2 || editPoint.data.nodeType == 10 || editPoint.data.nodeType == 11">
				<label>{{Array("", "单纵", "复纵", "轮型", "梯形", "单横")[editPoint.format]}}</label>
				<input v-model="editPoint.format" type="range" min="1" max="5">
			</div>
		</form>
		<div class="mui-button-row">
			<button class="mui-btn mui-badge-blue" @click="onAddSlClicked" style="margin-top: 5px; margin-left: -5px;" v-show="editPoint.data.nodeType == 1 || editPoint.data.nodeType == 2 || editPoint.data.nodeType == 10 || editPoint.data.nodeType == 11">敌舰</button>
			<button class="mui-btn" @click="editPoint.sL=[]" style="margin-top: 5px;" v-show="editPoint.data.nodeType == 1 || editPoint.data.nodeType == 2 || editPoint.data.nodeType == 10 || editPoint.data.nodeType == 11">清空</button>
			<button class="mui-btn mui-btn-danger" @click="onHideClick" style="margin-top: 5px;"> 取消</button>
			<button class="mui-btn mui-btn-green" @click="onSubmitPointClick" style="margin-top: 5px;"> 提交</button>
		</div>

		<ul class="mui-table-view" style="margin-top: 5px;">
			<li class="mui-table-view-cell" v-for="(sl, index) in editPoint.sL">
				<div class="mui-slider-right mui-disabled">
					<a class="mui-btn mui-btn-red mui-icon mui-icon-trash" @click="onDelDetail(index)"></a>
				</div>
				<div class="mui-slider-handle">
					遇{{em_list[sl.enemy]}} {{onGetNum(sl.num)}} 则 {{deal_list[sl.deal]}}
				</div>
			</li>
		</ul>
	</aside>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon mui-icon-left-nav mui-pull-left" @click="onCancel"></a>
		<h1 class="mui-title">护萌宝 地图配置</h1>
	</header>
	<div class="mui-content">
		<!-- 地图显示区 -->
		<div class="avgrund-cover"></div>
		<div class="mui-card">
			<!--页眉，地图和切换按钮-->
			<div class="mui-card-header">
				{{map_name}}
				<a class="mui-btn mui-icon mui-icon-gear" @click="onMapChangeClick" style="float: right">切换</a>
			</div>
			<!--地图图片显示-->
			<div class="mui-card-content">
				<img v-bind:src="map_src" style="width: 100%; height: 100%;" alt="无图片">
			</div>
		</div>

		<div class="mui-card">
			<div class="mui-card-header">
				其他设置
			</div>
			<div class="mui-card-content">
				<div class="mui-input-group">
					<div class="mui-input-row">
						<label>迂回失败最多</label>
						<input type="number" v-model="skip_fail_max" class="mui-input-numbox" placeholder="超过这个数就SL">
					</div>
				</div>
			</div>
		</div>


		<div class="mui-card">
			<div class="mui-card-header">
				路径点
				<a class="mui-btn mui-icon mui-icon-plusempty" style="float: right" @click="onAddPointClick">添加</a>
			</div>
			<div class="mui-card-content">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" v-for="(value, key) in user_point">
						<div class="mui-slider-right mui-disabled">
							<a class="mui-btn mui-btn-red mui-icon mui-icon-trash" @click="onDelPoint(key)"></a>

						</div>
						<div class="mui-slider-handle">
							{{key}}点 {{format_list[value.format]}} {{value.night? "": "不"}}夜战 {{value.roundabout? "迂回": ""}} {{value.spyFailSl? "索敌失败SL": ""}} {{value.sl? "资源点SL": ""}} {{value.detail.length == 0? "无":"有"}}特殊配置
						</div>
					</li>
				</ul>
			</div>
			<div class="mui-card-footer">
				<a class="mui-card-link" @click="user_point={}">清空</a>
				<a class="mui-card-link" @click="onSubmit">提交</a>
			</div>
		</div>
		<p style="text-align: center; margin-top: 15px"> -左滑路径点可删除-</p>

	</div>
</div>
<script type="text/javascript" charset="utf-8">
	var rawPveData;
	var debug = !(window && window.android);
	var pveData = {
		pveMap: [],  // 所有地图数据
		pveNode: [], // 选择地图以后加载的数据
		pveBuff: []
	}
	
	var app = new Vue({
		el : "#app",
		data : {
			version: 1,
			map_name: "",

			config_name: "",

			map_index: "",
			map_src: "",
			map_nodes: [],
			user_point: {}, 
			skip_fail_max: 2,
			config_buff: "0",
			
			
			// 添加点绑定
			deal_list: ['SL', '换单纵', '换复纵', '换轮型', '换梯形', '换单横'],
			format_list: ['', '单纵', '复纵', '轮型', '梯形', '单横'],
			em_list: {1: "航母",2: "轻母",3: "装母",4: "战列",5: "航战",6: "战巡",7: "重巡",8: "航巡",
					9: "雷巡",10: "轻巡",11: "重炮",12: "驱逐",13: "潜母",14: "潜艇",15: "炮潜",16: "补给",
					23: "导驱", 24: "防驱", 26: "导战"},
					
			editPoint: {
				data: {
					nodeType: "0",
					roundabout: "0",
					buff: []
				},
				flag: "",
				format: 1,
				sL: [],
				buff: "0",
				buffDec: "请选择战况",
			}
		},
		methods: {
			init: function() {
				pveData.pveMap = [];
				for (i in rawPveData.pveLevel) {
					if (rawPveData.pveLevel.hasOwnProperty(i)) {
						var level = rawPveData.pveLevel[i];
						pveData.pveMap.push({
							id: level.id,
							title: level.title + " | " + level.subTitle,
							src: "http://update.protector.moe/map/⑨⑨⑨.png".replace("⑨⑨⑨", level.id)
						})
					}
				}
				
				for (i in rawPveData.pveBuff) {
					if (rawPveData.pveBuff.hasOwnProperty(i)) {
						var buff = rawPveData.pveBuff[i];
						pveData.pveBuff.push({
							id: buff.id,
							title: buff.desc.replace(/\^.{17}/g, " ").trim()
						})
					}
				}
				
			},
			// 点击换图时加载数据
			onMapChangeClick: function() {
				var picker = new mui.PopPicker();
				var pickerData = [];
				for (i in pveData.pveMap) {
					if (pveData.pveMap.hasOwnProperty(i)) {
						pickerData.push({
							value: pveData.pveMap[i].id,
							text: pveData.pveMap[i].title
						})
					}
				}
				picker.setData(pickerData);
				picker.pickers[0].setSelectedValue('fourth', 100);
				picker.show(function(SelectedItem) {
					var index = SelectedItem[0]["value"];
					app.onMapChanged(index);
				});
			},
			// 当换图时更新数据
			onMapChanged: function(id) {
				app.user_point = {};
				for (i in pveData.pveMap) {
					if (pveData.pveMap.hasOwnProperty(i)) {
						if (pveData.pveMap[i].id == id) {
							//  带入地图数据
							var level = pveData.pveMap[i];
							app.map_index = level.id;
							app.map_name = level.title;
							app.map_src = level.src;
							
							// 解析点数数据
							pveData.pveNode = [];
							for (j in rawPveData.pveNode) {
								if (rawPveData.pveNode.hasOwnProperty(j)) {
									if (rawPveData.pveNode[j].pveLevelId == level.id) {
										var node = rawPveData.pveNode[j];
										pveData.pveNode.push({
											flag: node.flag,
											nodeType: node.nodeType,
											roundabout: node.roundabout,
											buff: node.buff
										})
									}
								}
							}
						}
					}
				}
			},
			// 选择点时弹出来的
			onSelectNode: function() {
				var picker = new mui.PopPicker();
				var pickerData = [];
				var nodeType = {"1": "战斗点", "2": "BOSS点", "3": "资源点", "4": "待机点", "5": "收费站", "10": "航空点", "11": "BOSS点"}
				for (i in pveData.pveNode) {
					if (pveData.pveNode.hasOwnProperty(i)) {
						var node = pveData.pveNode[i]
						if (node.flag === "") {
							continue;
						}
						pickerData.push({
							text: node.flag + " | " + nodeType[node.nodeType],
							value: node.flag
						})
					}
				}
				picker.setData(pickerData);
				picker.pickers[0].setSelectedValue('fourth', 100);
				picker.show(function(SelectedItem) {
					app.onLoadNode(SelectedItem[0]["value"]);
				});
			},
			onLoadNode: function(flag) {
				for (i in pveData.pveNode) {
					if (pveData.pveNode.hasOwnProperty(i)) {
						if (pveData.pveNode[i].flag === flag) {
							var node = pveData.pveNode[i]
							app.editPoint.flag = flag,
							app.editPoint.data.nodeType = node.nodeType,
							app.editPoint.data.roundabout = node.roundabout,
							app.editPoint.data.buff = node.buff
							break;
						}
					}
				}
			},
			
			onBuffSelect: function() {
				var picker = new mui.PopPicker();
				var pickerData = [];
				app.editPoint.data.buff.forEach(function(buff_item) {
					pveData.pveBuff.forEach(function(buff) {
						if (buff.id == buff_item) {
							pickerData.push({
								text: buff.title,
								value: buff.id,
							})
						}
					})
				})
				
				picker.setData(pickerData);
				picker.pickers[0].setSelectedValue('fourth', 100);
				picker.show(function(SelectedItem) {
					app.editPoint.buff = SelectedItem[0].value
					app.editPoint.buffDec = SelectedItem[0].text
				});
			},
			// 添加点点击时弹出dialog
			onAddPointClick: function() {
				app.editPoint = {
				data: {
					nodeType: "0",
					roundabout: "0",
					buff: []
				},
				flag: "",
				format: 1,
				sL: [],
				buff: "-1",
				buffDec: "请选择战况",
			}
				Avgrund.show("#point-popup");
			},
			// 点击关闭时关闭弹窗
			onHideClick: function() {
				Avgrund.hide();
			},
			// 特殊点时弹出选择器
			onAddSlClicked: function() {
				var picker = new mui.PopPicker({
					layer: 3
				});
				var children2 = [];
				for (var i=0; i<6; i++) {
					children2.push({
						value: i,
						text: app.deal_list[i]
					});
				}
				var children1 = [];
				for (var i=1; i<=6; i++) {
					children1.push({
						value: i,
						text: "≥" + i,
						children: children2
					});
				}
				for (var i=1; i<=6; i++) {
					children1.push({
						value: i+6,
						text: "<" + i,
						children: children2
					});
				}
				var parent = [];
				for (var i in app.em_list) {
					parent.push({
						value: i,
						text: app.em_list[i],
						children: children1
					});
				}
				picker.setData(parent);
				picker.show(function(SelectedItem) {
					app.editPoint.sL.push({
						enemy: SelectedItem[0]["value"],
						num: SelectedItem[1]["value"],
						deal: SelectedItem[2]["value"]
					});
				});
			},
			// 提交多点
			onSubmitPointClick: function() {
				// 读取数据
				var obj = {};
				if (app.editPoint.flag === "") {
					app.onHideClick();
					return;
				}
				console.log(app.editPoint.data.buff, app.editPoint.buff)
				if (app.editPoint.data.buff.length != 0 && app.editPoint.buff == "0") {
					mui.alert("请选择一个战况!");
					return;
				}
				obj.night = document.getElementById("sw-night").classList.contains("mui-active");
				obj.roundabout = document.getElementById("sw-round-about").classList.contains("mui-active");
				obj.sl = document.getElementById("sw-sl").classList.contains("mui-active");
				obj.detail = JSON.parse(JSON.stringify(app.editPoint.sL));
				obj.format = app.editPoint.format;
				obj.buff = app.editPoint.buff
				obj.spyFailSl = document.getElementById("sw-round-fail").classList.contains("mui-active");
				Vue.set(app.user_point, app.editPoint.flag, obj);
				app.onHideClick();
			},
			// 限制点的输入
			onDelPoint: function(index) {
				Vue.delete(app.user_point, index);
			},
			onDelDetail: function(index) {
				Vue.delete(app.editPoint.sL, index);
			},
			onSubmit: function() {
				mui.prompt('请输入配置名称', app.config_name,'提交',['取消','确认'],function (e) {
					if (e["index"] === 1) {
						var obj = {};
						obj.map = app.map_index;
						obj.skipMax = app.skip_fail_max;
						obj.detail = app.user_point;

						var len = 0;
						for (var i in obj.detail) {
							if (obj.detail.hasOwnProperty(i)) {
								len += 1;
							}
						}

						if (len == 0) {
							s = false;
							mui.alert('点数为空, 无法保存','错误','返回',function (e) {
							},'div');
							return;
						}

						var name = e.value.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
						if (name === 0 && app.config_name.length === 0) {
							s = false;
							mui.alert('名字为空','错误','返回',function (e) {
							},'div');
							return;
						}
						onFinish(name || app.config_name, obj);
					}
				},'div');
			},
			onCancel: function() {
				mui.confirm('确定取消操作吗? ','返回',['取消','确认'],function (e) {
					if (e.index === 1) {
						onCancel();
					}
				},'div');
			},
			onGetNum: function(num) {
				return num<=6? (" ≥ " + num + " "): (" < " + String(num-6) + " ");
			}
		},
		
		
	});
	
	window.onload = function() {
		if (!(window && window.android)) {
			fetch('http://127.0.0.1:5000/pve/getPveData/')
				.then(function(value){return value.json();})
				.then(function(pve) {
					rawPveData = pve
					app.init();
					app.onMapChanged('101')
				})
		}
	}
	

	var onLoad = function(name, str) {
		rawPveData = JSON.parse(window.android.getPveData())
		console.log('接受数据' + rawPveData)
		app.init();
		app.onMapChanged('101')
		if (name !== undefined && str !== undefined) {
			app.config_name = name || "";
			if (str !== "") {
				var obj = JSON.parse(str);
				app.onMapChanged(obj.map);
				app.user_point = obj.detail;
				app.skip_fail_max = obj.skipMax;
				app.config_buff = obj.buff;
			}
			console.log("加载数据:" + JSON.stringify(app.user_point));
		}
	};

	var onFinish = function(name, obj) {
		var str = JSON.stringify(obj);
		console.log("提交数据" + name + str);
		window.android && window.android.onFinish(name, str);
	};

	var onCancel = function() {
		console.log("用户取消操作");
		window.android && window.android.onCancel();
	};

</script>

</body>
</html>
